import React, 
{ 
    // Component 
} from 'react' 
import {CSSTransition} from 'react-transition-group' 
import {actionCreator} from  './store'
 
import {
    HeaderWrapper,
    // Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrap
} from './style'

import { connect } from 'react-redux'

const Header = (props) => {
    return (
        <HeaderWrapper>

            {/* <Logo href="/" /> */} 
            <Nav>
                <NavItem className="left active">首页</NavItem>
                <NavItem className="left">下载APP</NavItem>
                <NavItem className="right">登录</NavItem>
                <NavItem className="right">
                    <i className="iconfont">&#xe636;</i>
                </NavItem>
                <SearchWrap>

                    <CSSTransition in={props.focused}  timeout={300} classNames="slide">
                        <NavSearch className={props.focused ? 'focused' :''} 
                        onFocus={props.handleInputFocus}
                        onBlur={props.handleInputBlur}></NavSearch>  
                    </CSSTransition>
                    <i className={props.focused ? 'focused iconfont' :'iconfont'}  >&#xe614;</i>
                   
                </SearchWrap>
                
            </Nav>

            <Addition> 
                <Button className="writting"> 
                    <i className="iconfont">&#xe615;</i>  写文章 
                </Button>
                <Button className="reg"> 注册 </Button>
            </Addition>

        </HeaderWrapper>
    )
}

// class Header extends Component {
  
//     render() {
//         return (
//             <HeaderWrapper>

//                 {/* <Logo href="/" /> */}

//                 <Nav>
//                     <NavItem className="left active">首页</NavItem>
//                     <NavItem className="left">下载APP</NavItem>
//                     <NavItem className="right">登录</NavItem>
//                     <NavItem className="right">
//                         <i className="iconfont">&#xe636;</i>
//                     </NavItem>
//                     <SearchWrap>

//                         <CSSTransition in={this.props.focused}  timeout={300} classNames="slide">
//                             <NavSearch className={this.props.focused ? 'focused' :''} 
//                             onFocus={this.props.handleInputFocus}
//                             onBlur={this.props.handleInputBlur}></NavSearch>  
//                         </CSSTransition>
//                         <i className={this.props.focused ? 'focused iconfont' :'iconfont'}  >&#xe614;</i>
                       
//                     </SearchWrap>
                    
//                 </Nav>

//                 <Addition> 
//                     <Button className="writting"> 
//                         <i className="iconfont">&#xe615;</i>  写文章 
//                     </Button>
//                     <Button className="reg"> 注册 </Button>
//                 </Addition>

//             </HeaderWrapper>
//         )
//     }
  
// }

const mapStateToProps = (state) => {
    return {
        focused:state.header.get('focused')
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(){ 
            const action = actionCreator.searchFocus()
            dispatch(action)
        },
        handleInputBlur(){
            const action =  actionCreator.searchBlur()
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)